<template>
	<view class="tabbar">
		<view class="tab-item" :class="goto ==item.name?'active':''" v-for="(item,index) in list" :key="item.name"
			@click="go(item.page)">
			<view class="tab-img">
				<image :src="goto==item.name?item.selectedicon:item.icon" mode="heightFix" style="height: 100%;">
				</image>
			</view>
			<view class="tab-title">
				{{item.text}}
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		onBeforeMount,
		computed,
	} from 'vue'
	import {
		useStore
	} from 'vuex'

	defineProps({
		goto: {
			default: ''
		},
	})
	let go = (page) => {
		uni.switchTab({
			url: `${page.replace("#",'')}`
		})
	}
	const store = useStore();

	let list = computed(() => {
		return store.state.list
	})
	onBeforeMount(async () => {
		if (list.value.length <= 0) {
			try {
				let res = await uni.request({
					url: 'https://mall.iub88.com/smallapp/tabbar?appid=wxb36bd74e925cf1e4'
				})
				store.commit("setlist", res.data.r)
			} catch (e) {
				console.log(e);
			}
		}
	})
</script>

<style scoped lang="scss">
	.tabbar {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;

		.tab-item {
			padding: 0 10rpx;
			display: flex;
			flex-flow: column nowrap;
			align-items: center;

			&.active {
				color: red;
			}

			.tab-img {
				text-align: center;
				width: 60rpx;
				height: 50rpx;
			}

			.tab-title {
				font-size: 35rpx
			}
		}
	}
</style>